/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
  <div :style="{position: 'reletive'}">
    <!-- <div> -->
      <div :style="{position: 'absolute', left: Data?Data.left:0, top: Data?Data.top:0}">
        <svg
          t="1545378648902"
          class="icon"
          viewBox="0 0 50 50"
          style="enable-background:new 0 0 50 50;"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="6773"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          :width="Width"
          :height="Height"
        >
          <!-- <mask id="shade"> -->
          <path
            d="M893.44 158.72
            H130.56C99.84 158.72 76.8 181.76 76.8 212.48v599.04c0 30.72 23.04 53.76 53.76 53.76
            h762.88c30.72 0 53.76-23.04 53.76-53.76V212.48c0-30.72-23.04-53.76-53.76-53.76z
            M130.56 194.56
            h762.88c10.24 0 17.92 7.68 17.92 17.92
            v537.6l-209.92-189.44-171.52 143.36-245.76-209.92-171.52 186.88
            V212.48c0-10.24 7.68-17.92 17.92-17.92z
            m-17.92 616.96v-76.8l174.08-189.44 332.8 284.16
            H130.56c-10.24 0-17.92-7.68-17.92-17.92z
            m780.8 17.92
            h-217.6l-120.32-102.4 143.36-120.32 209.92 189.44v12.8c2.56 12.8-5.12 20.48-15.36 20.48z"
            :fill="MaskColor"
            p-id="2761"
            :class="maskmark ? '' : 'invisible'"
          ></path>
          <path
            d="M668.16 463.36c56.32 0 104.96-46.08 104.96-104.96 0-56.32-46.08-104.96-104.96-104.96S563.2 302.08 563.2 358.4c0 56.32 46.08 104.96 104.96 104.96z"
            :fill="MaskColor"
            p-id="2762"
            :class="maskmark ? '' : 'invisible'"
          ></path>
          <!-- </mask> -->
          <!-- <mask id="shade"> -->
      <!-- ====================================右行相位图标合集============================================= -->
          <g id="右行" v-if="roadDirection === 'right'">
            <path
              id="西左转_3_"
              :stroke-width="PathWidth"
              :fill="status[5].color"
              :class="status[5].isshow ? '' : 'invisible'"
              d="M17.3,36.3H1.4v2h16c2.1,0,3.8-1.7,3.9-3.8l0.3-1.9l2.5,0.3l-2.6-6.4l-4.3,5.4l2.5,0.3
          l-0.3,2.2C19.2,35.5,18.4,36.3,17.3,36.3L17.3,36.3z"
            ></path>
            <path
              id="西右转"
              :stroke-width="PathWidth"
              :fill="status[6].color"
              :class="status[6].isshow ? '' : 'invisible'"
              d="M17.3,38.3c1.1,0,1.9,0.8,2.1,1.9l0.3,2.2l-2.5,0.3l4.3,5.4l2.6-6.4L21.6,42l-0.3-1.9
          c-0.1-2.1-1.8-3.8-3.9-3.8h-16v2H17.3L17.3,38.3z"
            ></path>
            <polygon
              id="西直行_1_"
              :stroke-width="PathWidth"
              :fill="status[4].color"
              :class="status[4].isshow ? '' : 'invisible'"
              points="1.4,38.3 24.6,38.3 24.6,40.8 30.7,37.3 24.6,33.9 24.6,36.3 1.4,36.3"
            ></polygon>
            <path
              id="西调头_1_"
              :stroke-width="PathWidth"
              :fill="status[7].color"
              :class="status[7].isshow ? '' : 'invisible'"
              d="M11.8,29.2H8.9v-2.4l-6,3.5l6,3.5v-2.5h2.9c1,0,1.9,1.1,1.9,2.5c0,1.3-0.9,2.5-1.9,2.5H1.4
          v2h10.4c2.1,0,3.9-2,3.9-4.5C15.6,31.2,13.9,29.2,11.8,29.2z"
            ></path>
            <path
              id="南左转_1_"
              :stroke-width="PathWidth"
              :fill="status[13].color"
              :class="status[13].isshow ? '' : 'invisible'"
              d="M36.8,34.1V50h2V34c0-2.1-1.7-3.8-3.8-3.9l-1.9-0.3l0.3-2.5L27,30l5.4,4.3l0.3-2.5l2.2,0.3
          C35.9,32.2,36.8,33,36.8,34.1L36.8,34.1z"
            ></path>
            <path
              id="南右转_1_"
              :stroke-width="PathWidth"
              :fill="status[14].color"
              :class="status[14].isshow ? '' : 'invisible'"
              d="M40.9,32l2-0.3l0.3,2.5l5.4-4.3l-6.4-2.6l0.3,2.5l-1.9,0.3c-2.1,0-3.8,1.7-3.8,3.9v16h2
          V33.9c0-1,0.9-1.9,1.9-1.9H40.9z"
            ></path>
            <polygon
              id="南直行_1_"
              :stroke-width="PathWidth"
              :fill="status[12].color"
              :class="status[12].isshow ? '' : 'invisible'"
              points="38.8,50 38.8,26.8 41.2,26.8 37.8,20.7 34.3,26.8 36.8,26.8 36.8,50"
            ></polygon>
            <path
              id="南调头_1_"
              :stroke-width="PathWidth"
              :fill="status[15].color"
              :class="status[15].isshow ? '' : 'invisible'"
              d="M29.8,39.6v2.9h-2.5l3.5,6l3.5-6h-2.5v-2.9c0-1,1.1-1.9,2.5-1.9c1.3,0,2.5,0.9,2.5,1.9V50h2
          V39.6c0-2.1-2-3.9-4.5-3.9C31.8,35.8,29.8,37.5,29.8,39.6z"
            ></path>
            <path
              id="东左转_3_"
              :stroke-width="PathWidth"
              :fill="status[1].color"
              :class="status[1].isshow ? '' : 'invisible'"
              d="M32.7,13.7h15.9v-2h-16c-2.1,0-3.8,1.7-3.9,3.8l-0.3,1.9L26,17.1l2.6,6.4l4.3-5.4l-2.5-0.3
          l0.3-2.2C30.8,14.5,31.6,13.7,32.7,13.7L32.7,13.7z"
            ></path>
            <path
              id="东右转"
              :stroke-width="PathWidth"
              :fill="status[2].color"
              :class="status[2].isshow ? '' : 'invisible'"
              d="M32.7,11.7c-1.1,0-1.9-0.8-2-1.9l-0.3-2.2l2.5-0.3l-4.3-5.4L26,8.3L28.4,8l0.3,1.9
          c0.1,2.1,1.8,3.8,3.9,3.8h16v-2H32.7L32.7,11.7z"
            ></path>
            <polygon
              id="东直行_1_"
              :stroke-width="PathWidth"
              :fill="status[0].color"
              :class="status[0].isshow ? '' : 'invisible'"
              points="48.6,11.7 25.4,11.7 25.4,9.2 19.3,12.7 25.4,16.1 25.4,13.7 48.6,13.7"
            ></polygon>
            <path
              id="东调头_1_"
              :stroke-width="PathWidth"
              :fill="status[3].color"
              :class="status[3].isshow ? '' : 'invisible'"
              d="M38.2,20.8h2.9v2.4l6-3.5l-6-3.5v2.5h-2.9c-1,0-1.9-1.1-1.9-2.5c0-1.3,0.9-2.5,1.9-2.5h10.4
          v-2H38.2c-2.1,0-3.9,2-3.9,4.5S36.1,20.8,38.2,20.8z"
            ></path>
            <path
              id="北左转_1_"
              :stroke-width="PathWidth"
              :fill="status[9].color"
              :class="status[9].isshow ? '' : 'invisible'"
              d="M13.2,15.9V0l-2,0v16c0,2.1,1.7,3.8,3.8,3.9l1.9,0.3l-0.3,2.5L23,20l-5.4-4.3l-0.3,2.5
          l-2.2-0.3C14.1,17.8,13.2,17,13.2,15.9L13.2,15.9z"
            ></path>
            <path
              id="北右转_1_"
              :stroke-width="PathWidth"
              :fill="status[10].color"
              :class="status[10].isshow ? '' : 'invisible'"
              d="M9.2,17.9l-2,0.3l-0.3-2.5L1.4,20l6.4,2.6l-0.3-2.5l1.9-0.3c2.1,0,3.8-1.7,3.8-3.9V0l-2,0
          v16c0,1-0.9,1.9-1.9,1.9C9.3,17.9,9.2,17.9,9.2,17.9z"
            ></path>
            <polygon
              id="北直行_1_"
              :stroke-width="PathWidth"
              :fill="status[8].color"
              :class="status[8].isshow ? '' : 'invisible'"
              points="11.2,0 11.2,23.2 8.8,23.2 12.2,29.3 15.7,23.2 13.2,23.2 13.2,0"
            ></polygon>
            <path
              id="北调头_1_"
              :stroke-width="PathWidth"
              :fill="status[11].color"
              :class="status[11].isshow ? '' : 'invisible'"
              d="M20.2,10.4V7.5h2.5l-3.5-6l-3.5,6h2.5v2.9c0,1-1.1,1.9-2.5,1.9s-2.5-0.9-2.5-1.9V0l-2,0
          v10.4c0,2.1,2,3.9,4.5,3.9C18.2,14.2,20.2,12.5,20.2,10.4z"
            ></path>
          </g>

      <!-- ====================================左行相位图标合集============================================= -->
          <g id="组-左行" v-if="roadDirection === 'left'">
            <path
              id="东右转-左行"
              :stroke-width="PathWidth"
              :fill="status[2].color"
              :class="status[2].isshow ? '' : 'invisible'"
              d="M32.7,36.3c-1.1,0-1.9-0.8-2.1-1.9l-0.3-2.2l2.5-0.3l-4.3-5.4l-2.6,6.4l2.5-0.3l0.3,1.9
          c0.1,2.1,1.8,3.8,3.9,3.8h16v-2H32.7L32.7,36.3z"
            ></path>
            <path
              id="东左转-左行"
              :stroke-width="PathWidth"
              :fill="status[1].color"
              :class="status[1].isshow ? '' : 'invisible'"
              d="M32.7,38.3h15.9v-2h-16c-2.1,0-3.8,1.7-3.9,3.8L28.4,42l-2.5-0.3l2.6,6.4l4.3-5.4
          l-2.5-0.3l0.3-2.2C30.8,39.1,31.6,38.3,32.7,38.3L32.7,38.3z"
            ></path>
            <polygon
              id="东直行-左行"
              :stroke-width="PathWidth"
              :fill="status[0].color"
              :class="status[0].isshow ? '' : 'invisible'"
              points="48.6,36.3 25.4,36.3 25.4,33.9 19.3,37.3 25.4,40.8 25.4,38.3 48.6,38.3"
            ></polygon>
            <path
              id="东调头-左行"
              class="st0"
              :stroke-width="PathWidth"
              :fill="status[3].color"
              :class="status[3].isshow ? '' : 'invisible'"
              d="M34.3,33.8c0,2.5,1.8,4.5,3.9,4.5h10.4v-2H38.2c-1,0-1.9-1.2-1.9-2.5
          c0-1.4,0.9-2.5,1.9-2.5h2.9v2.5l6-3.5l-6-3.5v2.4h-2.9C36.1,29.2,34.4,31.2,34.3,33.8z"
            ></path>
            <path
              id="南左转-左行"
              :stroke-width="PathWidth"
              :fill="status[13].color"
              :class="status[13].isshow ? '' : 'invisible'"
              d="M9.3,32c1,0,1.9,0.9,1.9,1.9V50h2V34c0-2.2-1.7-3.9-3.8-3.9l-1.9-0.3l0.3-2.5l-6.4,2.6
          l5.4,4.3l0.3-2.5l2,0.3H9.3z"
            ></path>
            <path
              id="南右转-左行"
              :stroke-width="PathWidth"
              :fill="status[14].color"
              :class="status[14].isshow ? '' : 'invisible'"
              d="M13.2,34.1c0-1.1,0.9-1.9,1.9-2l2.2-0.3l0.3,2.5L23,30l-6.4-2.7l0.3,2.5L15,30.1
          c-2.1,0.1-3.8,1.8-3.8,3.9v16h2V34.1L13.2,34.1z"
            ></path>
            <polygon
              id="南直行-左行"
              :stroke-width="PathWidth"
              :fill="status[12].color"
              :class="status[12].isshow ? '' : 'invisible'"
              points="13.2,50 13.2,26.8 15.7,26.8 12.2,20.7 8.8,26.8 11.2,26.8 11.2,50"
            ></polygon>
            <path
              id="南调头-左行"
              :stroke-width="PathWidth"
              :fill="status[15].color"
              :class="status[15].isshow ? '' : 'invisible'"
              d="M15.7,35.7c-2.5,0-4.5,1.8-4.5,3.9V50h2V39.6c0-1,1.2-1.9,2.5-1.9
          c1.4,0,2.5,0.9,2.5,1.9v2.9h-2.5l3.5,6l3.5-6h-2.5v-2.9C20.2,37.5,18.2,35.8,15.7,35.7z"
            ></path>
            <path
              id="西右转-左行"
              :stroke-width="PathWidth"
              :fill="status[6].color"
              :class="status[6].isshow ? '' : 'invisible'"
              d="M17.3,13.7c1.1,0,1.9,0.8,2,1.9l0.3,2.2l-2.5,0.3l4.3,5.4l2.6-6.4l-2.4,0.3l-0.3-1.9
          c-0.1-2.1-1.8-3.8-3.9-3.8h-16v2L17.3,13.7L17.3,13.7z"
            ></path>
            <path
              id="西左转-左行"
              :stroke-width="PathWidth"
              :fill="status[5].color"
              :class="status[5].isshow ? '' : 'invisible'"
              d="M17.3,11.7H1.4v2h16c2.1,0,3.8-1.7,3.9-3.8L21.6,8L24,8.3l-2.6-6.4l-4.3,5.4l2.5,0.3
          l-0.3,2.2C19.2,10.9,18.4,11.7,17.3,11.7L17.3,11.7z"
            ></path>
            <polygon
              id="西直行-左行"
              :stroke-width="PathWidth"
              :fill="status[4].color"
              :class="status[4].isshow ? '' : 'invisible'"
              points="1.4,13.7 24.6,13.7 24.6,16.1 30.7,12.7 24.6,9.2 24.6,11.7 1.4,11.7"
            ></polygon>
            <path
              id="西调头-左行"
              :stroke-width="PathWidth"
              :fill="status[7].color"
              :class="status[7].isshow ? '' : 'invisible'"
              d="M15.7,16.2c0-2.5-1.8-4.5-3.9-4.5H1.4v2h10.4c1,0,1.9,1.2,1.9,2.5
          c0,1.4-0.9,2.5-1.9,2.5H8.9v-2.5l-6,3.5l6,3.5v-2.4h2.9C13.9,20.8,15.7,18.7,15.7,16.2z"
            ></path>
            <path
              id="北左转-左行"
              :stroke-width="PathWidth"
              :fill="status[9].color"
              :class="status[9].isshow ? '' : 'invisible'"
              d="M40.7,17.9c-1,0-1.9-0.9-1.9-1.9V0h-2v15.9c0,2.2,1.7,3.9,3.8,3.9l1.9,0.3l-0.3,2.5
          l6.4-2.6l-5.5-4.3l-0.3,2.5l-2-0.3C40.8,17.9,40.7,17.9,40.7,17.9z"
            ></path>
            <path
              id="北右转-左行"
              :stroke-width="PathWidth"
              :fill="status[10].color"
              :class="status[10].isshow ? '' : 'invisible'"
              d="M36.8,15.9c0,1.1-0.9,1.9-1.9,2l-2.2,0.3l-0.3-2.5L27,20l6.4,2.7l-0.3-2.5l1.9-0.3
          c2.1-0.1,3.8-1.8,3.8-3.9V0h-2L36.8,15.9L36.8,15.9z"
            ></path>
            <polygon
              id="北直行-左行"
              :stroke-width="PathWidth"
              :fill="status[8].color"
              :class="status[8].isshow ? '' : 'invisible'"
              points="36.8,0 36.8,23.2 34.3,23.2 37.8,29.3 41.2,23.2 38.8,23.2 38.8,0"
            ></polygon>
            <path
              id="北调头-左行"
              :stroke-width="PathWidth"
              :fill="status[11].color"
              :class="status[11].isshow ? '' : 'invisible'"
              d="M34.3,14.3c2.5,0,4.5-1.8,4.5-3.9V0h-2v10.4c0,1-1.1,1.9-2.5,1.9s-2.5-0.9-2.5-1.9V7.5
          h2.5l-3.5-6l-3.5,6h2.5v2.9C29.8,12.5,31.8,14.2,34.3,14.3z"
            ></path>
          </g>
        </svg>
      </div>
      <div :style="{position: 'absolute', left: Data?Data.left:0, top: Data?Data.top:0}">
        <svg
            :width="Width"
            :height="Height"
              version="1.1"
              id="图层_1"
              xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
              viewBox="0 0 34 34"
              style="enable-background:new 0 0 34 34;"
              xml:space="preserve">
          <g id="路段行人过街-东西"
          :class="peoplestatus[0].isshow? '' : 'invisible'">
          <rect x="19.9" y="14.2" class="st1" width="1.6" height="5.6"/>
          <rect x="17.4" y="14.2" class="st1" width="1.6" height="5.6"/>
          <rect x="22.4" y="14.2" class="st1" width="1.6" height="5.6"/>
          <rect x="24.9" y="14.2" class="st1" width="1.6" height="5.6"/>
          <rect x="27.4" y="14.2" class="st1" width="1.6" height="5.6"/>
          <rect x="29.9" y="14.2" class="st1" width="1.6" height="5.6"/>
          <rect x="32.4" y="14.2" class="st1" width="1.6" height="5.6"/>
          <rect x="7.5" y="14.2" class="st1" width="1.6" height="5.6"/>
          <rect x="5" y="14.2" class="st1" width="1.6" height="5.6"/>
          <rect x="2.5" y="14.2" class="st1" width="1.6" height="5.6"/>
          <rect x="0" y="14.2" class="st1" width="1.6" height="5.6"/>
          <rect x="10" y="14.2" class="st1" width="1.6" height="5.6"/>
          <rect x="12.5" y="14.2" class="st1" width="1.6" height="5.6"/>
          <rect x="14.9" y="14.2" class="st1" width="1.6" height="5.6"/>
          </g>
          <g id="路段行人过街-南北" class="st0"
          :class="peoplestatus[1].isshow? '' : 'invisible'">
          >
          <rect x="14.2" y="19.9" class="st1" width="5.6" height="1.6"/>
          <rect x="14.2" y="17.4" class="st1" width="5.6" height="1.6"/>
          <rect x="14.2" y="22.4" class="st1" width="5.6" height="1.6"/>
          <rect x="14.2" y="24.9" class="st1" width="5.6" height="1.6"/>
          <rect x="14.2" y="27.4" class="st1" width="5.6" height="1.6"/>
          <rect x="14.2" y="29.9" class="st1" width="5.6" height="1.6"/>
          <rect x="14.2" y="32.4" class="st1" width="5.6" height="1.6"/>
          <rect x="14.2" y="7.5" class="st1" width="5.6" height="1.6"/>
          <rect x="14.2" y="5" class="st1" width="5.6" height="1.6"/>
          <rect x="14.2" y="2.5" class="st1" width="5.6" height="1.6"/>
          <rect x="14.2" y="0" class="st1" width="5.6" height="1.6"/>
          <rect x="14.2" y="10" class="st1" width="5.6" height="1.6"/>
          <rect x="14.2" y="12.5" class="st1" width="5.6" height="1.6"/>
          <rect x="14.2" y="14.9" class="st1" width="5.6" height="1.6"/>
          </g>
          <g id="斜向行人1" class="st0"
          :class="peoplestatus[2].isshow? '' : 'invisible'">
          >
          <rect x="14.2" y="16.2" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -7.0438 17.0053)" class="st1" width="5.6" height="1.6"/>
          <rect x="12.4" y="14.4" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -6.3149 15.2456)" class="st1" width="5.6" height="1.6"/>
          <rect x="15.9" y="17.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -7.7727 18.7651)" class="st1" width="5.6" height="1.6"/>
          <rect x="17.7" y="19.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -8.5017 20.5248)" class="st1" width="5.6" height="1.6"/>
          <rect x="19.5" y="21.5" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -9.2306 22.2845)" class="st1" width="5.6" height="1.6"/>
          <rect x="21.2" y="23.2" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -9.9595 24.0443)" class="st1" width="5.6" height="1.6"/>
          <rect x="23" y="25" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -10.6884 25.804)" class="st1" width="5.6" height="1.6"/>
          <rect x="24.7" y="26.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -11.4128 27.5531)" class="st1" width="5.6" height="1.6"/>
          <rect x="26.5" y="28.5" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -12.1418 29.3128)" class="st1" width="5.6" height="1.6"/>
          <rect x="28.3" y="30.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -12.8707 31.0725)" class="st1" width="5.6" height="1.6"/>
          <rect x="5.4" y="7.4" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -3.3993 8.2067)" class="st1" width="5.6" height="1.6"/>
          <rect x="3.6" y="5.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -2.6704 6.4469)" class="st1" width="5.6" height="1.6"/>
          <rect x="1.9" y="3.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -1.9415 4.6872)" class="st1" width="5.6" height="1.6"/>
          <rect x="0.1" y="2.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -1.2126 2.9275)" class="st1" width="5.6" height="1.6"/>
          <rect x="7.1" y="9.2" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.1282 9.9664)" class="st1" width="5.6" height="1.6"/>
          <rect x="8.9" y="10.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.8571 11.7261)" class="st1" width="5.6" height="1.6"/>
          <rect x="10.7" y="12.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -5.586 13.4859)" class="st1" width="5.6" height="1.6"/>
          </g>
          <g id="斜向行人2" class="st0"
          :class="peoplestatus[3].isshow? '' : 'invisible'"
          >
          <rect x="16.2" y="14.2" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -7.047 16.9978)" class="st1" width="1.6" height="5.6"/>
          <rect x="17.9" y="12.4" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -5.2872 17.7267)" class="st1" width="1.6" height="5.6"/>
          <rect x="14.4" y="15.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -8.8067 16.2689)" class="st1" width="1.6" height="5.6"/>
          <rect x="12.7" y="17.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -10.5664 15.54)" class="st1" width="1.6" height="5.6"/>

          <rect x="10.9" y="19.5" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -12.3262 14.8111)" class="st1" width="1.6" height="5.6"/>
          <rect x="9.1" y="21.2" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -14.0859 14.0822)" class="st1" width="1.6" height="5.6"/>
          <rect x="7.4" y="23" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -15.8456 13.3533)" class="st1" width="1.6" height="5.6"/>
          <rect x="5.6" y="24.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -17.5947 12.6288)" class="st1" width="1.6" height="5.6"/>
          <rect x="3.9" y="26.5" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -19.3544 11.8999)" class="st1" width="1.6" height="5.6"/>
          <rect x="2.1" y="28.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -21.1142 11.171)" class="st1" width="1.6" height="5.6"/>
          <rect x="25" y="5.4" transform="matrix(0.7071 -0.7071 0.7071 0.7071 1.7517 20.6423)" class="st1" width="1.6" height="5.6"/>
          <rect x="26.7" y="3.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 3.5114 21.3712)" class="st1" width="1.6" height="5.6"/>
          <rect x="28.5" y="1.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 5.2712 22.1001)" class="st1" width="1.6" height="5.6"/>
          <rect x="30.3" y="0.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 7.0309 22.829)" class="st1" width="1.6" height="5.6"/>

          <rect x="23.2" y="7.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -8.040609e-03 19.9134)" class="st1" width="1.6" height="5.6"/>
          <rect x="21.5" y="8.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -1.7678 19.1845)" class="st1" width="1.6" height="5.6"/>
          <rect x="19.7" y="10.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -3.5275 18.4556)" class="st1" width="1.6" height="5.6"/>
          </g>
          <g id="北行人"
          :class="peoplestatus[4].isshow? '' : 'invisible'"
          class="st0">
          <rect x="19.9" class="st1" width="1.6" height="5.6"/>
          <rect x="17.4" class="st1" width="1.6" height="5.6"/>
          <rect x="22.4" class="st1" width="1.6" height="5.6"/>
          <rect x="24.9" class="st1" width="1.6" height="5.6"/>
          <rect x="27.4" class="st1" width="1.6" height="5.6"/>
          <rect x="29.9" class="st1" width="1.6" height="5.6"/>
          <rect x="32.4" class="st1" width="1.6" height="5.6"/>
          <rect x="7.5" class="st1" width="1.6" height="5.6"/>
          <rect x="5" class="st1" width="1.6" height="5.6"/>
          <rect x="2.5" class="st1" width="1.6" height="5.6"/>
          <rect x="0" class="st1" width="1.6" height="5.6"/>
          <rect x="10" class="st1" width="1.6" height="5.6"/>
          <rect x="12.5" class="st1" width="1.6" height="5.6"/>
          <rect x="14.9" class="st1" width="1.6" height="5.6"/>
          </g>
          <g id="南行人"
          :class="peoplestatus[5].isshow? '' : 'invisible'"
          class="st0">
          <rect x="19.9" y="28.4" class="st1" width="1.6" height="5.6"/>
          <rect x="17.4" y="28.4" class="st1" width="1.6" height="5.6"/>
          <rect x="22.4" y="28.4" class="st1" width="1.6" height="5.6"/>
          <rect x="24.9" y="28.4" class="st1" width="1.6" height="5.6"/>
          <rect x="27.4" y="28.4" class="st1" width="1.6" height="5.6"/>
          <rect x="29.9" y="28.4" class="st1" width="1.6" height="5.6"/>
          <rect x="32.4" y="28.4" class="st1" width="1.6" height="5.6"/>
          <rect x="7.5" y="28.4" class="st1" width="1.6" height="5.6"/>
          <rect x="5" y="28.4" class="st1" width="1.6" height="5.6"/>
          <rect x="2.5" y="28.4" class="st1" width="1.6" height="5.6"/>
          <rect x="0" y="28.4" class="st1" width="1.6" height="5.6"/>
          <rect x="10" y="28.4" class="st1" width="1.6" height="5.6"/>
          <rect x="12.5" y="28.4" class="st1" width="1.6" height="5.6"/>
          <rect x="14.9" y="28.4" class="st1" width="1.6" height="5.6"/>
          </g>
          <g id="东行人"
          :class="peoplestatus[6].isshow? '' : 'invisible'"
          class="st0">
          <rect x="28.4" y="19.9" class="st1" width="5.6" height="1.6"/>
          <rect x="28.4" y="17.4" class="st1" width="5.6" height="1.6"/>
          <rect x="28.4" y="22.4" class="st1" width="5.6" height="1.6"/>
          <rect x="28.4" y="24.9" class="st1" width="5.6" height="1.6"/>
          <rect x="28.4" y="27.4" class="st1" width="5.6" height="1.6"/>
          <rect x="28.4" y="29.9" class="st1" width="5.6" height="1.6"/>
          <rect x="28.4" y="32.4" class="st1" width="5.6" height="1.6"/>
          <rect x="28.4" y="7.5" class="st1" width="5.6" height="1.6"/>
          <rect x="28.4" y="5" class="st1" width="5.6" height="1.6"/>
          <rect x="28.4" y="2.5" class="st1" width="5.6" height="1.6"/>
          <rect x="28.4" y="0" class="st1" width="5.6" height="1.6"/>
          <rect x="28.4" y="10" class="st1" width="5.6" height="1.6"/>
          <rect x="28.4" y="12.5" class="st1" width="5.6" height="1.6"/>
          <rect x="28.4" y="14.9" class="st1" width="5.6" height="1.6"/>
          </g>
          <g id="西行人"
          :class="peoplestatus[7].isshow? '' : 'invisible'"
          class="st0">
          <rect y="19.9" class="st1" width="5.6" height="1.6"/>
          <rect y="17.4" class="st1" width="5.6" height="1.6"/>
          <rect y="22.4" class="st1" width="5.6" height="1.6"/>
          <rect y="24.9" class="st1" width="5.6" height="1.6"/>
          <rect y="27.4" class="st1" width="5.6" height="1.6"/>
          <rect y="29.9" class="st1" width="5.6" height="1.6"/>
          <rect y="32.4" class="st1" width="5.6" height="1.6"/>
          <rect y="7.5" class="st1" width="5.6" height="1.6"/>
          <rect y="5" class="st1" width="5.6" height="1.6"/>
          <rect y="2.5" class="st1" width="5.6" height="1.6"/>
          <rect y="0" class="st1" width="5.6" height="1.6"/>
          <rect y="10" class="st1" width="5.6" height="1.6"/>
          <rect y="12.5" class="st1" width="5.6" height="1.6"/>
          <rect y="14.9" class="st1" width="5.6" height="1.6"/>
          </g>
          <g id="二次过街-西" class="st0">
          <g id="西下"
          :class="peoplestatus[8].isshow? '' : 'invisible'"
          >
              <rect y="19.9" class="st1" width="5.6" height="1.6"/>
              <rect y="22.4" class="st1" width="5.6" height="1.6"/>
              <rect y="24.9" class="st1" width="5.6" height="1.6"/>
              <rect y="27.4" class="st1" width="5.6" height="1.6"/>
              <rect y="29.9" class="st1" width="5.6" height="1.6"/>
              <rect y="32.4" class="st1" width="5.6" height="1.6"/>
          </g>
          <g id="西上"
          :class="peoplestatus[9].isshow? '' : 'invisible'"
          >
              <rect y="7.5" class="st1" width="5.6" height="1.6"/>
              <rect y="5" class="st1" width="5.6" height="1.6"/>
              <rect y="2.5" class="st1" width="5.6" height="1.6"/>
              <rect y="0" class="st1" width="5.6" height="1.6"/>
              <rect y="10" class="st1" width="5.6" height="1.6"/>
              <rect y="12.5" class="st1" width="5.6" height="1.6"/>
          </g>
          </g>
          <g id="二次过街-东" class="st0">
          <g id="东上"
          :class="peoplestatus[10].isshow? '' : 'invisible'"
          >
              <rect x="28.4" y="12.5" class="st1" width="5.6" height="1.6"/>
              <rect x="28.4" y="10" class="st1" width="5.6" height="1.6"/>
              <rect x="28.4" y="7.5" class="st1" width="5.6" height="1.6"/>
              <rect x="28.4" y="5" class="st1" width="5.6" height="1.6"/>
              <rect x="28.4" y="2.5" class="st1" width="5.6" height="1.6"/>
              <rect x="28.4" y="0" class="st1" width="5.6" height="1.6"/>
          </g>
          <g id="东下"
          :class="peoplestatus[11].isshow? '' : 'invisible'"
          >
              <rect x="28.4" y="24.9" class="st1" width="5.6" height="1.6"/>
              <rect x="28.4" y="27.4" class="st1" width="5.6" height="1.6"/>
              <rect x="28.4" y="29.9" class="st1" width="5.6" height="1.6"/>
              <rect x="28.4" y="32.4" class="st1" width="5.6" height="1.6"/>
              <rect x="28.4" y="22.4" class="st1" width="5.6" height="1.6"/>
              <rect x="28.4" y="19.9" class="st1" width="5.6" height="1.6"/>
          </g>
          </g>
          <g id="二次过街-南" class="st0">
          <g id="南右"
          :class="peoplestatus[12].isshow? '' : 'invisible'"
          >
              <rect x="19.9" y="28.4" class="st1" width="1.6" height="5.6"/>
              <rect x="22.4" y="28.4" class="st1" width="1.6" height="5.6"/>
              <rect x="24.9" y="28.4" class="st1" width="1.6" height="5.6"/>
              <rect x="27.4" y="28.4" class="st1" width="1.6" height="5.6"/>
              <rect x="29.9" y="28.4" class="st1" width="1.6" height="5.6"/>
              <rect x="32.4" y="28.4" class="st1" width="1.6" height="5.6"/>
          </g>
              <g id="南左"
              :class="peoplestatus[13].isshow? '' : 'invisible'"
              >
                  <rect x="7.5" y="28.4" class="st1" width="1.6" height="5.6"/>
                  <rect x="5" y="28.4" class="st1" width="1.6" height="5.6"/>
                  <rect x="2.5" y="28.4" class="st1" width="1.6" height="5.6"/>
                  <rect x="0" y="28.4" class="st1" width="1.6" height="5.6"/>
                  <rect x="10" y="28.4" class="st1" width="1.6" height="5.6"/>
                  <rect x="12.5" y="28.4" class="st1" width="1.6" height="5.6"/>
              </g>
          </g>
              <g id="二次过街-北_1_" class="st0">
              <g id="北右_1_"
              :class="peoplestatus[14].isshow? '' : 'invisible'"
              >
                  <rect x="19.9" class="st1" width="1.6" height="5.6"/>
                  <rect x="22.4" class="st1" width="1.6" height="5.6"/>
                  <rect x="24.9" class="st1" width="1.6" height="5.6"/>
                  <rect x="27.4" class="st1" width="1.6" height="5.6"/>
                  <rect x="29.9" class="st1" width="1.6" height="5.6"/>
                  <rect x="32.4" class="st1" width="1.6" height="5.6"/>
              </g>
              <g id="北左_1_"
              :class="peoplestatus[15].isshow? '' : 'invisible'"
              >
                  <rect x="7.5" class="st1" width="1.6" height="5.6"/>
                  <rect x="5" class="st1" width="1.6" height="5.6"/>
                  <rect x="2.5" class="st1" width="1.6" height="5.6"/>
                  <rect x="0" class="st1" width="1.6" height="5.6"/>
                  <rect x="10" class="st1" width="1.6" height="5.6"/>
                  <rect x="12.5" class="st1" width="1.6" height="5.6"/>
              </g>
          </g>
        </svg>
      </div>
    <!-- </div> -->
  </div>
</template>
<script>
// import { mapState } from 'vuex'
export default {
  name: 'xdr-dir-selector',
  props: {
    showlist: {
      type: Array,
      default: function () {
        return [
          {
            id: 1,
            color: 'red'
          },
          {
            id: 2,
            color: 'yellow'
          }
        ]
      }
    },
    Width: {
      type: String,
      default: '200px'
    },
    Height: {
      type: String,
      default: '200px'
    },
    PathWidth: {
      type: Number,
      default: 18
    },
    ISActiveMask: {
      type: Boolean,
      default: false
    },
    MaskColor: {
      type: String,
      default: '#0096ba'
    },
    roadDirection: {
      type: String,
      default: 'right'
    },
    Data: {
      type: Object
    }

  },
  // computed: {
  //   ...mapState({
  //     roadDirection: state => state.globalParam.roadDirection
  //   })
  // },
  data () {
    return {
      maskmark: false,
      peoplestatus: [
        {
          id: 1,
          name: '东西路段人行横道',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 2,
          name: '南北路段人行横道',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 3,
          name: 'X人行横道-\\',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 4,
          name: 'X人行横道-/',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 5,
          name: '北人行横道',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 6,
          name: '南人行横道',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 7,
          name: '东人行横道',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 8,
          name: '西人行横道',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 9,
          name: '西人行横道-下',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 10,
          name: '西人行横道-上',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 11,
          name: '东人行横道-上',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 12,
          name: '东人行横道-下',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 13,
          name: '南人行横道-右',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 14,
          name: '南人行横道-左',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 15,
          name: '北人行横道-右',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 16,
          name: '北人行横道-左',
          isshow: false,
          color: '#0096ba'
        }
      ],
      status: [
        {
          id: 1,
          name: 'East-Straight',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 2,
          name: 'East-Left',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 3,
          name: 'East-Right',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 4,
          name: 'East-Back ',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 5,
          name: 'West-Straight',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 6,
          name: 'West-Left',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 7,
          name: 'West-Right',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 8,
          name: 'West-Back',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 9,
          name: 'North-Straight',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 10,
          name: 'North-Left',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 11,
          name: 'North-Right',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 12,
          name: 'North-Back',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 13,
          name: 'South-Straight',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 14,
          name: 'South-Left',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 15,
          name: 'South-Right',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 16,
          name: 'South-Back',
          isshow: false,
          color: '#0096ba'
        }
      ]
    }
  },
  methods: {
    randShow () {
      let num1 = parseInt(Math.random() * (15 - 0 + 1) + 0)
      let num2 = parseInt(Math.random() * (15 - 0 + 1) + 0)
      for (let i = 0; i < 16; i++) {
        if (this.status[i].isshow) {
          this.status[i].isshow = false
        }
        if (i === num1 || i === num2) {
          this.status[i].isshow = true
        }
      }
    },
    refreshShow (showList) {
      if (showList.length > 16) {
        console.log('list can not be bigger than 16!')
      }
      this.maskmark = false
      if (showList.length <= 0) {
        if (this.ISActiveMask) {
          this.maskmark = true
        }
      }

      for (let i = 0; i < 16; i++) {
        if (this.status[i].isshow) {
          this.status[i].isshow = false
        }
      }
      for (let i = 0; i < 16; i++) {
        if (i < showList.length) {
          let id = showList[i].id
          if (!id) return
          if (id > 16 || id <= 0) {
            console.log('Id is invalied!')
            continue
          }
          this.status[id - 1].isshow = true
          this.status[id - 1].color = showList[i].color
        }
      }
    },
    refreshShows (showlist) {
      for (let i = 0; i < 16; i++) {
        if (this.peoplestatus[i].isshow) {
          this.peoplestatus[i].isshow = false
        }
      }
      if (!showlist[0].peddirection) return
      if (showlist[0].peddirection.length === 0) return
      for (let i = 0; i < showlist[0].peddirection.length; i++) {
        for (let j = 0; j < this.peoplestatus.length; j++) {
          if (showlist[0].peddirection[i].name === this.peoplestatus[j].name) {
            this.peoplestatus[j].isshow = true
          }
        }
      }
    }
  },
  created () {
    this.refreshShow(this.showlist)
    this.refreshShows(this.showlist)
  },
  watch: {
    showlist: {
      handler: function (newList) {
        this.refreshShow(newList)
        this.refreshShows(newList)
      },
      deep: true // 深度监听
    }
  }
}
</script>

<style scoped>
.invisible {
  visibility: hidden;
}
.st0{opacity:0.5;}
.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#303133;}
</style>
